<template>
	<view class="search_container">
    <!-- 重新定义顶部状态栏和导航栏 -->
    <view class="top_box" :style="{'height ': statusBarHeight + 100 + 'px'}">
      <!-- 状态栏高度 -->
      <view class="status-bar" :style="{'height': statusBarHeight + 'px'}"></view>
      <view @click="goTop" class="nav_bar">
        <view class="nva_bar_content" >
          <u-icon class="nav_bar_content_left" name="arrow-left" color="#3D3D3D" size="40" @click="Fanhui()"></u-icon>
          <!--<view class="nav_bar_content_left" >{{tabTitle}}</view>-->
          <view class="nav_bar_title" >{{NavTitle}}</view>
        </view>
      </view>
      <!--搜索框-->
      <view class="search_box">
        <view class="search_content">
          <view @click="searchChange()" class="search_button">搜 索</view>
          <u-search
              @search="searchChange"
              shape="round"
              v-model="searchKey"
              :show-action="false"
              placeholder="请输入店铺名称..."
              :clearable="true"
              height="74"
              class="search_input"
          />
        </view>
      </view>
    </view>
    <!--主题内容 -->
    <view class="feast_box" :style="{'height ': windowHeight - headerHeight + 'px'}">
      <scroll-view
          :scroll-y="true"
          :scroll-top="scrollHeight"
          :scroll-with-animation="true"
          :refresher-enabled="true"
          @refresherrefresh="onrefresherrefresh"
          :refresher-triggered="isTriggered"
          refresher-default-style="none"
          lower-threshold="30"
          @scrolltolower="onScrolltolower"
          @scroll="scrollPage"
          style="height: 100%"
      >
        <!--套餐列表-->
        <view class="feast_list">
          <!-- 加载中提示 -->
          <view class="lanjiazai_wrap" v-if="skeletonLoading">
            <view class="lanjiazai_item">
              <view class="loading_icon">
                <image :src="BestImgUrl + '/index/logo_loading.gif'" class="loading_gif"></image>
              </view>
              <view class="tag">加载中...</view>
            </view>
          </view>
          <view class="shops_list_wrap" v-if="shopsLists.length != 0">
            <view v-for="(items,index) in shopsLists" :key="index" class="shops_list">
              <!--<shop-item v-if="items.shop_type === 1" :items="items"></shop-item>-->
              <WaimaiList :items="items" />
            </view>
            <view class="chudijiazai">
              <u-loadmore icon-type="flower" :status="loadingstatus" font-size="24" :load-text="loadText" margin-top="30"
                          margin-bottom="10"/>
              <view v-if="Bottomingrefresh == true" class="Bottomingrefresh" @click="RefreshBtn()">立即刷新</view>
            </view>
          </view>
          <!-- 暂无店铺提示 -->
          <view v-else-if="shopsLists.length == 0 && failTimeOutShow == false" class="noData_box shop_list_wrap_height">
            <image :src="BestImgUrl + '/index/noData.png'"></image>
            <view v-if="Address == '正在定位...'">正在定位...</view>
            <view v-else>暂无店铺</view>
          </view>
          <!-- 网络错误提示 -->
          <view v-else-if="failTimeOutShow == true && shopsLists.length == 0" class="noData_box shop_list_wrap_height">
            <image src="/static/images/Frame33412.png"></image>
            <view class="timeOut">
              <view>网络好像出问题了~</view>
              <view @click="refurbish()">立即刷新</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 客服教程 -->
    <view v-show="isGoTop" class="server_box" >
      <!--<view @click="openService" class="help">
        <image :src="`https://td.lszbg.com/public/uploads/h5/home/kefu.png`" mode="widthFix" style="height:33rpx;width:33rpx"></image>
        <view style="color: #323232;font-size: 18rpx;">客服</view>
      </view>-->
      <!--<view style="height: 10rpx"></view>-->
      <!--<view
          @click="toNewUser" class="help">
        <image :src="`https://td.lszbg.com/public/uploads/h5/home/new_user.png`" mode="widthFix" style="height:33rpx;width:33rpx"></image>
        <view style="color: #323232;font-size: 18rpx;">教程</view>
      </view>-->
      <!--<view style="height: 10rpx"></view>-->
      <view @click="goTop" class="scrollToTop">
        <image :src="`https://td.lszbg.com/public/uploads/h5/home/top.png`" mode="widthFix" style="height:38rpx;width:38rpx"></image>
      </view>
    </view>
	</view>
</template>

<script>
	// import ShopsGfList from "@/pages/feast/components/shops-gf-list.vue";
  import WaimaiList from "@/components/Waimai/WaimaiList.vue";

  const app = getApp();
	export default {
    /*  ShopsGfList*/
    components: {WaimaiList},
		data() {
			return {
        imgurlBwc: app.globalData.imgurlBwc,
        BestImgUrl: app.globalData.imgurl,
        NavTitle: '搜索店铺', //页面标题
        tabTitle: '精选',
        statusBarHeight: 0, //状态栏高度
        windowHeight: '', // 获取屏幕高度
        headerHeight: 0,// 获取头部高度

        //套餐列表
        shopsLists: [],
        pageSize: '',
        pageNum: 10,
        isTriggered: false, //  是否触发下拉刷新
        skeletonLoading: true, //加载中图片
        Bottomingrefresh: false,
        loadingstatus: 'loading',
        loadText: {
          loadmore: '轻轻上拉',
          loading: '加载中...',
          nomore: '没有更多了'
        },

        failTimeOutShow: false,
        zanwuloc: true,
        searchKey:  '',//搜索关键字
        oldScrollTop: 0, //旧滚动高度
        isGoTop: false, //显示返回顶部按钮
        scrollHeight: 0, //滚动高度
			};
		},
    onLoad() {
      // 顶部安全区域高度
      this.statusBarHeight = uni.getWindowInfo().statusBarHeight
      // 获取屏幕高度
      this.windowHeight = uni.getWindowInfo().windowHeight
      // 获取头部高度
      uni.createSelectorQuery().select('.top_box').boundingClientRect(rect => {
        //console.log('height：', rect); // 输出元素的高度
        this.headerHeight = Number('height' in rect ? rect.height : '')
      }).exec();
      // 套餐列表加载
      this.getShopsList();
    },

		methods: {
      //下拉刷新
      onrefresherrefresh(){
        let that = this
        that.searchKey = ''
        console.log('已到顶部');
        that.skeletonLoading = true
        // 开启 下拉刷新
        that.isTriggered = true
        that.pageSize = 1
        that.pageNum = 10
        that.searchKey = ''
        that.shopsLists = []
        setTimeout(function () {
          that.getShopsList()
          uni.stopPullDownRefresh();
          // 关闭 下拉刷新
          that.isTriggered = false
        }, 1500);
      },
      //触底加载
      onScrolltolower() {
        let that = this
        that.loadText.nomore = '没有更多了'
        that.Bottomingrefresh = false
        that.loadingstatus = 'loading';
        if (that.zanwuloc == true) {
          setTimeout(function () {
            console.log('已滚动到底部');
            that.getShopsList()
            uni.hideNavigationBarLoading()
          }, 500);
        } else {
          setTimeout(function () {
            uni.hideNavigationBarLoading()
          }, 500);
        }
      },
      // 搜索附近店铺
      searchChange(e){
        let that = this
        console.log('搜索内容', that.searchKey)
        that.skeletonLoading = true
        that.pageSize = 1
        that.shopsLists = []
        setTimeout(function () {
          that.getShopsList()
        }, 1500);
      },
      // 套餐列表数据
      getShopsList(searchKey) {
        let that = this;
        let lat = uni.getStorageSync('lat')
        let lon = uni.getStorageSync('lng')
        let CityName = uni.getStorageSync('CityName')
        let Province = uni.getStorageSync('Province')
        let userPhone = uni.getStorageSync('userinfo').username
        that.$api.GetOfficialReturnShopListAPI({
          pagePvId: that.pageSize === 1 ? '' : that.pageSize,
          limit: that.pageNum,
          // province: Province,
          // city: CityName,
          lat: lat,
          lon: lon,
          mt_mobile: userPhone,
          searchWord: that.searchKey,
          sortType: 1,
          categoryTypeList: '',
        }).then(res => {
          // console.log('套餐列表', res.data.result.poiList)
          if (res.data.code === 200){
            that.pageSize = res.data.result.pagePvId
            that.loadText.nomore = '没有更多了'
            that.Bottomingrefresh = false
            if (res.data.result.poiList.length < 10){
              that.shopsLists = that.shopsLists.concat(res.data.result.poiList)
              that.loadingstatus = 'nomore'
            } else {
              if (res.data.result.poiList.length != 0){
                that.loadingstatus = 'loading';
                that.shopsLists = that.shopsLists.concat(res.data.result.poiList)
              } else{
                that.loadingstatus = 'nomore'
              }
            }
            console.log('套餐列表', that.shopsLists)

            /* if (that.pageSize != '') {
              if (res.data.result.poiList.length != 0) {
                that.loadingstatus = 'loading';
                that.shopsLists = that.shopsLists.concat(res.data.result.poiList)
              } else {
                that.loadingstatus = 'nomore'
              }
            } else {
              that.shopsLists = res.data.result.poiList
              that.loadingstatus = 'nomore'
            } */
            that.skeletonLoading = false
          }
        })
        .catch(err => {
          if (!err.data) {
            //不存在就是访问超时或者接口错误
            //console.log('请求错误或请求超时', err.errMsg)
            that.skeletonLoading = false
            if (that.loadingstatus == 'loading') {
              that.loadingstatus = 'nomore'
              that.loadText.nomore = '网络好像出问题了~'
              that.Bottomingrefresh = true
            } else {
              that.shopsLists = []
              that.loadingstatus = 'loading'
              that.loadText.nomore = '没有更多了'
              that.Bottomingrefresh = false
              that.failTimeOutShow = true
            }
          } else {
            uni.showToast({
              title: err.data.msg,
              icon: 'none',
              duration: 2000
            });
          }
        })
      },

      Fanhui() {
        uni.navigateBack()
      },
      scrollPage(e) {
        let that = this
        // console.log('页面滚动高度', e.detail.scrollTop)
        // 获取页面滚动高度
        that.oldScrollTop = e.detail.scrollTop;
        that.isGoTop = e.detail.scrollTop > 10;

      },
      // 返回顶部
      goTop() {
        this.scrollHeight = 0.1
        this.$nextTick(() => {
          this.scrollHeight = 0
        })
        // console.log('返回顶部', this.scrollHeight)
      },
		}
	}
</script>

<style lang="scss">
page{
  height: 100%;
  background-color: #F5F5F5;
}
.search_container{
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  //自定义导航栏css
  .top_box {
    position: relative;
    z-index: 10;
    background: linear-gradient( 180deg, #F4D513 0%, #FAE437 98%);
    .status-bar {
      height: var(--status-bar-height) + 'px';
    }
    .nav_bar {
      height: 80rpx;
      line-height: 80rpx;
      .nva_bar_content{
        display: flex;
        text-align: center;
        align-items: center;
        .nav_bar_content_left {
          width: 80rpx;
          height: 80rpx;
          line-height: 80rpx;
          z-index: 10;
          display: inline-block;
        }
        .nav_bar_title {
          flex: 1;
          font-size: 32rpx;
          font-weight: bold;
          color: #3D3D3D;
          position: absolute;
          left: 0;
          right: 0;
        }
        .nav_bar_content_right {
          display: inline-block;
          color: #FF5F15;
          font-size: 32rpx;
          font-weight: bold;
        }
      }
      image {
        width: 56rpx;
        height: 56rpx;
      }
    }
    // 搜索css
    .search_box {
      height: 120rpx;
      padding: 20rpx;
      .search_content{
        position: relative;
        .search_input {
          flex: 1;
          width: 100%;
          height: 74rpx;
          line-height: 74rpx;
        }
        .search_button{
          background: #F9D90E;
          width: 120rpx;
          height: 60rpx;
          border-radius: 40rpx;
          color: white;
          font-size: 28rpx;
          text-align: center;
          line-height: 60rpx;
          position: absolute;
          right: 8rpx;
          top: 8rpx;
          z-index: 10;
          transition: all 1s ease;
        }

      }

    }
  }
  /* 主题内容css */
  .feast_box{
    flex: 1;
    overflow-y: auto;
    /* feast_navbar css */
    .feast_navbar{
      height: 300rpx;
      padding: 20rpx;
      display: flex;
      flex-wrap: wrap;
      .feast_navbar_item{
        width: 20%;
        height: 140rpx;
        background: #FFFFFF;
        text-align: center;
        .nav-icon{
          width: 96rpx;
          height: 96rpx;
        }
        .menu_text{
          font-size: 24rpx;
          color: #3D3D3D;
          line-height: 40rpx;
          display: block;
        }
      }
    }
    /* 店铺列表css */
    .feast_list{
      padding: 20rpx 0;
      background: #F5F5F5;
      .shops_list_wrap{

      }
    }
  }
}
/* 懒加载css */
.lanjiazai_wrap {
  position: relative;
  z-index: 10000;
  height: calc(100vh);
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #999;
  padding-top: 100rpx;
}

.tag {
  margin-top: 8rpx;
  font-size: 24rpx;
}

.loading_icon {
  width: 120rpx;
  height: 120rpx;
}

.loading_gif {
  width: 120rpx;
  height: 120rpx;
}

.lanjiazai_item {
  text-align: center;
}

.shop_list_wrap_height {
  width: 100%;
  height: 5000rpx;
  position: relative;
  z-index: 4;
}

.noData_box {
  margin-top: 0;
  padding-bottom: 260rpx;
  text-align: center;
  color: #999;
}

.noData_box image {
  width: 240rpx;
  height: 240rpx;
}

.timeOut {
  font-size: 12px;
  color: #666;
  margin: 0px 0px 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeOut view:nth-child(2) {
  color: #00acfd;
  padding-left: 10rpx;
}
//  客服css
.server_box {
  position: fixed;
  right: 10rpx;
  bottom: 26%;
  z-index: 100;
  border-radius: 50%;

  .icon {
    width: 38rpx;
    height: 38rpx;
  }

  .text {
    font-size: 20rpx;
    color: #333;
  }
}
//帮助css
.help {
  min-height: 70rpx;
  min-width: 70rpx;
  background-color: #fdfdfd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3rpx 6rpx rgba(0, 0, 0, 0.3);
  border-radius: 100rpx;
}
/* 返回顶部 */
.scrollToTop{
  min-height: 70rpx;
  min-width: 70rpx;
  background-color: #fdfdfd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3rpx 6rpx rgba(0, 0, 0, 0.3);
  border-radius: 100rpx;
}
</style>